var start = getclass("start")[0];
var score = getclass("score")[0];
var str = "QWERTYUIOPASDFGHJKLZXCVBNM";
var scoreNum = 0; //得分
var timeNum = 0; //计时
var lettArr = []; //body里面所有子元素
var timer = null; //计算时间  计算时间的timer
var gameOver = false //游戏是否结束
update();
//设置一个开关 如果等于
var bool=true;
start.onclick = function () {
    if (bool) {
        bool=false;
        if (gameOver===true) {
            gameOver=false;
            timeNum=0;
            scoreNum=0;
            update();
        }
         //创建好多个字母
    for (var i = 0; i < 26; i++) {
        //属于是调用对象 调用对象就变成独立的了 循环一次 调用一次对象 所以就变成了多次的了 x就不会重叠位置
        new letters();
    }
    //按字母让其消除
    //lettArr等于documen body里面所有子元素
    lettArr=document.body.children;
    //键盘按下：onkeydown
    document.onkeydown=function (event) {
        //获取事件
        event=event||window.event;
        //拿到的是编码 须把其转化为字母才可以
        var key=String.fromCharCode(event.keyCode); //转变方法只能转变英文字母
        //判断消除字母
        for(var j=0;j<lettArr.length;j++){
            if (lettArr[j].innerHTML===key) {
                document.body.removeChild(lettArr[j]);
                scoreNum++;
                update();
            }
        }
        
    }
    //每点一次计时器需要清一下
    clearInterval(timer);
    timer=setInterval(function () {
        timeNum++;
        //判断让时间停止  当body.children的长度小于三的时候 里面就不会有自己创建的div标签了 因为里面本身就有三个标签 分别是 button span script
        if (document.body.children.length<=3) {
            gameOver=true;
            alert("游戏结束，用时："+(timeNum-1)+"秒");
            clearInterval(timer);
           
        }
        update();
    },1000)

    }
   
}



function letters() {
    //this只是一个字母的
    this.x = Math.random() * 1200 + 100; //x的取值是随机取值  math.random的意思是0-0.99*浏览器宽度1200 加一百的目的怕是随机出现0所以加上一百
    this.y = 0; //y的距离不变 始终在浏览器最上面  所以为0；
    this.step = Math.random() * 5 + 1; //math.random值是0-0.99 加上一是怕出现0 不能形成随机速度  （下落速度）
    var lettDiv = document.createElement("div"); //创建一个新的div
    lettDiv.className = "letter" //创建的div等于之前所定义的类名
    lettDiv.innerHTML = str[parseInt(Math.random() * 26)] //把str里面的数组随机填进新创建的lettDiv里面*26 26个英文字母 对应其索引；
    lettDiv.style.left = this.x + "px"; //lettdiv的运动过程
    lettDiv.style.top = this.y + "px";
    document.body.appendChild(lettDiv);
    //this在window里面在下面定时器中无法使用所以找个变量给他存起来 因为下面的变量也要使用
    var that = this;
    //定时器是字母下落速度
    lettDiv.timer = setInterval(function () {
        that.y = that.y + that.step; //当前位置加上步长 得到下一步所在位置
        //判断字母回来 如果大于client高度 重新x随机和 y=0重新出去
        if (lettDiv.offsetTop >= client().height) {
            that.y = 0;
            that.x = Math.random() * 1200 + 100;
            //如何在回来之后速度再次随机 写在判断里面 
            that.step = Math.random() * 5 + 1
        }
        //判断游戏是否结束 结束就===true清空定时器  否则就是false便继续运行;
        if (gameOver === false) {
            lettDiv.style.top = that.y + "px";
            lettDiv.style.left = that.x + "px"
        } else {
               bool=true;
            clearInterval(lettDiv.timer)
        }

    }, 10)
}
//写得分的函数
function update() {
    score.innerHTML="得分："+scoreNum+"用时："+timeNum;
}
